<template>
  <div>
    <div>
      <p>核销说明：</p>

      <p>1 输入核销码后可查询出对应订单的商品</p>

      <p>2 核对商品信息无误，点击核销即可完成核销</p>

      <p>3 已核销的商品不可再次核销。</p>
    </div>

    <el-form :model="dataForm" style="width: 800px; margin-top: 30px" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit('dataForm')" label-width="80px">
      <el-form-item label="核销码" prop="verification">
        <div class="flex">
          <el-input v-model="dataForm.verification" placeholder="请输入核销码"></el-input>
          <el-button class="ml10" @click="checkList">查询</el-button>
        </div>
      </el-form-item>
      <el-form-item label="备注" prop="remark" v-if="isShow">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="dataForm.remark" maxlength="300">
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer" v-if="isShow">
      <el-button type="primary" @click="dataFormSubmit('dataForm')">确认核销</el-button>
    </span>
    <template v-if="isShow">
      <div class="title">
        订单详情
      </div>
      <el-table :data="tableData" border style="width: 100%; margin: 40px 0">
        <el-table-column prop="shop_name" label="商品" width="200px">
          <template slot-scope="scope">
            <div style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            ">
              <img :src="scope.row.goods_img" alt="" style="width: 50px; height: 50px" />
              <div>
                {{ scope.row.goods_title }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="source_shop_name" label="服务商" width="100">
        </el-table-column>
        <el-table-column prop="order_code" label="订单号"> </el-table-column>
        <el-table-column prop="total_real_price" label="金额"> </el-table-column>
        <el-table-column prop="service_card" label="福利">
          <template slot-scope="scope">
            {{ scope.row.service_card.welfare_items }}
          </template>
        </el-table-column>
        <el-table-column prop="service_card" label="服务项目">
          <template slot-scope="scope">
            <div v-for="item in scope.row.service_card.service_item_list" :key="item.id">
              {{ item.item_name }} x {{ item.num }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="service_card.use_count" label="已核销次数"> </el-table-column>
        <el-table-column prop="service_card.residue_use_count" label="剩余次数"> </el-table-column>
      </el-table>
      <div class="title">
        预约记录
      </div>
      <el-table :data="recordList" border style="width: 100%; margin: 40px 0">

        <el-table-column prop="appointment_time" label="预约时间">
        </el-table-column>
        <el-table-column prop="require" label="要求"> </el-table-column>

      </el-table>
      <div class="title">
        核销记录
      </div>
      <el-table :data="ficationList" border style="width: 100%; margin: 40px 0">

        <el-table-column prop="verification_time" label="核销时间">
        </el-table-column>
        <el-table-column prop="verification_code" label="核销码">
        </el-table-column>
        <el-table-column prop="admin" label="操作人">
        </el-table-column>
        <el-table-column prop="remark" label="备注">
        </el-table-column>

      </el-table>
    </template>
  </div>
</template>

<script>
import orderService from '@/api/orderService.js'
import serviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      dataForm: {
        verification: null,
        remark: null
      },
      dataRule: {
        verification: [
          {
            required: true,
            message: '核销码不能为空',
            trigger: 'blur'
          }
        ]
      },
      tableData: [],
      ficationList: [],
      recordList: [],
      isShow: false,
      orderInfo: null
    }
  },

  methods: {
    // 查询订单
    checkList () {
      orderService
        .sgoodsverificationLoadorder(this.dataForm.verification)
        .then((res) => {
          this.isShow = true
          if (res.data && res.data.code == 200) {
            this.orderInfo = res.data.data
            this.tableData = res.data.data.child_order_list
            this.sgoodsverificationList(res.data.data.id, this.tableData[0].id)
          }
        })
    },
    // 查询订单的核销记录
    sgoodsverificationList (orderId, childId) {
      serviceApi.recordList({ child_order_id: childId }).then((res) => {
        if (res.data && res.data.code == 200) {
          this.recordList = res.data.page.list
        } else {

        }
      })
      orderService.sgoodsverificationList(orderId, childId).then((res) => {
        if (res.data && res.data.code == 200) {
          this.ficationList = res.data.list
        }
      })
    },
    dataFormSubmit (e) {
      this.$refs[e].validate((valid) => {
        if (valid) {
          orderService.sgoodsverificationCheck({ verification_code: this.dataForm.verification, remark: this.dataForm.remark }).then((res) => {
            if (res.data && res.data.code == 200) {
              this.$message.success('核销成功！')
              this.dataForm.verification = null
              this.dataForm.remark = null
              this.sgoodsverificationList(this.orderInfo.id, this.orderInfo.child_order_list[0].id)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
.flex {
  display: flex;
}

.ml10 {
  margin-left: 10px;
}
.title {
  padding-left: 10px;
  border-left: 3px solid #17b3a3;
  line-height: 15px;
  font-size: 16px;
  margin: 5px 0;
  color: #333333;
}
.dialog-footer {
  margin-bottom: 50px;
  margin-left: 80px;
}
</style>
